<script>
import $ from 'jquery';
import { mapActions } from 'vuex';
import { __, sprintf } from '~/locale';
import Icon from '~/vue_shared/components/icon.vue';
import GlModal from '~/vue_shared/components/gl_modal.vue';
import tooltip from '~/vue_shared/directives/tooltip';
import ListItem from './list_item.vue';

export default {
  components: {
    Icon,
    ListItem,
    GlModal,
  },
  directives: {
    tooltip,
  },
  props: {
    title: {
      type: String,
      required: true,
    },
    fileList: {
      type: Array,
      required: true,
    },
    iconName: {
      type: String,
      required: true,
    },
    action: {
      type: String,
      required: true,
    },
    actionBtnText: {
      type: String,
      required: true,
    },
    actionBtnIcon: {
      type: String,
      required: true,
    },
    itemActionComponent: {
      type: String,
      required: true,
    },
    stagedList: {
      type: Boolean,
      required: false,
      default: false,
    },
    activeFileKey: {
      type: String,
      required: false,
      default: null,
    },
    keyPrefix: {
      type: String,
      required: true,
    },
    emptyStateText: {
      type: String,
      required: false,
      default: __('No changes'),
    },
  },
  computed: {
    titleText() {
      return sprintf(__('%{title} changes'), {
        title: this.title,
      });
    },
    filesLength() {
      return this.fileList.length;
    },
  },
  methods: {
    ...mapActions(['stageAllChanges', 'unstageAllChanges', 'discardAllChanges']),
    actionBtnClicked() {
      this[this.action]();

      $(this.$refs.actionBtn).tooltip('hide');
    },
    openDiscardModal() {
      $('#discard-all-changes').modal('show');
    },
  },
  discardModalText: __(
    "You will loose all the unstaged changes you've made in this project. This action cannot be undone.",
  ),
};
</script>

<template>
  <div
    class="ide-commit-list-container"
  >
    <header
      class="multi-file-commit-panel-header d-flex mb-0"
    >
      <div
        class="d-flex align-items-center flex-fill"
      >
        <icon
          v-once
          :name="iconName"
          :size="18"
          class="append-right-8"
        />
        <strong>
          {{ titleText }}
        </strong>
        <div class="d-flex ml-auto">
          <button
            v-tooltip
            ref="actionBtn"
            :title="actionBtnText"
            :aria-label="actionBtnText"
            :disabled="!filesLength"
            :class="{
              'disabled-content': !filesLength
            }"
            type="button"
            class="d-flex ide-staged-action-btn p-0 border-0 align-items-center"
            data-placement="bottom"
            data-container="body"
            data-boundary="viewport"
            @click="actionBtnClicked"
          >
            <icon
              :name="actionBtnIcon"
              :size="16"
              class="ml-auto mr-auto"
            />
          </button>
          <button
            v-tooltip
            v-if="!stagedList"
            :title="__('Discard all changes')"
            :aria-label="__('Discard all changes')"
            :disabled="!filesLength"
            :class="{
              'disabled-content': !filesLength
            }"
            type="button"
            class="d-flex ide-staged-action-btn p-0 border-0 align-items-center"
            data-placement="bottom"
            data-container="body"
            data-boundary="viewport"
            @click="openDiscardModal"
          >
            <icon
              :size="16"
              name="remove-all"
              class="ml-auto mr-auto"
            />
          </button>
        </div>
      </div>
    </header>
    <ul
      v-if="filesLength"
      class="multi-file-commit-list list-unstyled append-bottom-0"
    >
      <li
        v-for="file in fileList"
        :key="file.key"
      >
        <list-item
          :file="file"
          :action-component="itemActionComponent"
          :key-prefix="keyPrefix"
          :staged-list="stagedList"
          :active-file-key="activeFileKey"
        />
      </li>
    </ul>
    <p
      v-else
      class="multi-file-commit-list form-text text-muted text-center"
    >
      {{ emptyStateText }}
    </p>
    <gl-modal
      v-if="!stagedList"
      id="discard-all-changes"
      :footer-primary-button-text="__('Discard all changes')"
      :header-title-text="__('Discard all unstaged changes?')"
      footer-primary-button-variant="danger"
      @submit="discardAllChanges"
    >
      {{ $options.discardModalText }}
    </gl-modal>
  </div>
</template>
